<template>
  <div class="dashboard-container">
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <el-divider />
    <div class="overview-tabs">

      <el-tabs v-model="childname" @tab-click="handleClick">
        <el-tab-pane name="first">
          <div slot="label" class="tab-label">资讯</div>
          <operaterSearch @tableData="tableData">
            <el-button class="add" @click="showEditForm(1)">新增</el-button>
          </operaterSearch>
          <operaterTable ref="mychild1" :childname="childname" />
        </el-tab-pane>
        <el-tab-pane name="second">
          <div slot="label" class="tab-label">轮播图</div>
          <operaterSearch :childname="childname" @tableData="tableData" ref="scr">
            <template slot="sxBtn"><el-button class="add" @click="showEditForm(null)">筛选</el-button>
            </template>
            <template slot="xzAdd">
              <el-button class="add" @click="showEditForm(2)">新增</el-button>
            </template>
          </operaterSearch >
          <operaterTable  ref="mychild2" :childname="childname"/>
        </el-tab-pane>
        <el-tab-pane name="third">
          <div slot="label" class="tab-label">关于莱福</div>
          <operaterTable ref="mychild3" :childname="childname" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import operaterSearch from './components/operaterSearch'
import operaterTable from './components/operaterTable'
export default {
  components: {
    operaterSearch,
    operaterTable,
    Breadcrumb
  },
  data() {
    return {
      childname: 'first',
      true: false
    }
  },
  mounted(){
      this.childname = sessionStorage.getItem("childname") || "first"
  },
  methods: {
    tableData(parm){
      if(this.childname === 'first'){
          sessionStorage.setItem("childname","first")
          this.$refs.mychild1.getListSs(parm);
      }else if(this.childname === 'second'){
          sessionStorage.setItem("childname","second")
           this.$refs.mychild2.getListsecondSs(parm);
      }else if(this.childname === 'third'){
          sessionStorage.setItem("childname","third")
          this.$refs.mychild3.getListthirdSs(parm);
      }
    },
    handleClick(tab, event) {
      if(this.childname === 'first'){
          sessionStorage.setItem("childname","first")
          this.$refs.mychild1.getList();
      }else if(this.childname === 'second'){
          sessionStorage.setItem("childname","second")
           this.$refs.mychild2.getListsecond();
      }else if(this.childname === 'third'){
          sessionStorage.setItem("childname","third")
          this.$refs.mychild3.getListthird();
      }
     
    },
    showEditForm(par) {
      if (par === 1) {
        this.$router.push({ path: 'operaterAdd' })
         this.show = true
        return
      }
      if (par === 2) {
        this.$router.push({ path: 'addCaousel' })
         this.show = true
        return
      }
      if (par === null) { 
        this.$refs.scr.src();
        return
      }
     
      
    }
  }
}
</script>

<style lang="scss">
.overview-tabs {
  .el-tabs {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }

  .el-tabs__content {
    padding: 17px;
  }
}
</style>

<style lang="scss" scoped>
.overview-tabs {
  padding: 10px;
}

.tab-label {
  width: 76px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
}
.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 14px;

  &::after {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    width: 2px;
    height: 37px;
    background-color: #5AC6B7;
    transform: translateY(-50%);
  }
}
</style>
